<template>
  <div class="page has-navbar"  v-nav="{hideNavbar: true}">
    <form  @submit.prevent="nextStep">
      
    <von-header theme="assertive" >
      <button class="button button-icon ion-ios-arrow-back" type="button" slot="left" @click="returnFn"></button>
      <span slot="title">更多信息</span>
      <button class="button button-icon" slot="right" type="submit" >完成</button>
    </von-header>
    <div class="page-content padding-top">
      
      <list>
        <input type="hidden" name="marketId" v-model="marketId" required>
        <input type="hidden" name="userId" v-model="userId" required>
        <input type="hidden" name="carId" v-model="carId" required>
        <input type="hidden" name="shopId" v-model="shopId" required>

        <item class="y-item item-icon-right" @click.native="showImage()">
          <span class="item-title">上传图片</span>
          <img src="static/images/ic_upload_img.svg" class="ic_upload_img" alt="">
          <input type="hidden" v-model="carImgList" name="carImageJson">
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>        
        <item class="y-item item-icon-right" @click.native="showCarEnviron()">
          <span class="item-title">环保标准</span>
          <input type="text" class="y-item-input" name="carEnviron" v-model="carEnviron" placeholder="请选择环保标准" readonly required>
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>
        <item class="y-item item-icon-right" @click.native="showCarConfig()">
          <span class="item-title">车辆配置</span>
          <input type="text" class="y-item-input" name="" v-model="configNameList" placeholder="请选择车辆配置" readonly required>
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
          <input type="hidden" name="carConfIds" v-model="configList" >

        </item>
        <item class="y-item item-icon-right" @click.native="showCarFuel()">
          <span class="item-title">燃料类型</span>
          <input type="text" class="y-item-input" name="carFuel" v-model="carFuel" placeholder="请选择燃料类型" readonly required>
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>

        <div>
          <von-toggle text="是否4S店保养" v-model="pushNotification"></von-toggle>
          <input type="hidden" name="car4sUpkeepState" :value="pushNotification ? 1 : 0">
        </div>

        <item class="y-item item-icon-right">
          <span class="item-title">瑕疵描述</span>
          <input type="text" class="y-item-input" name="carFlawDesc" v-model="carFlawDesc" placeholder="请输入车况" >
        </item>
        <item class="y-item item-icon-right">
          <span class="item-title">卖点描述</span>
          <input type="text" class="y-item-input" name="carSellingPointDesc" v-model="carSellingPointDesc" placeholder="请输入卖点描述" >
        </item>
        <item class="y-item item-icon-right">
          <span class="item-title">按揭说明</span>
          <input type="text" class="y-item-input" name="carMortgageDesc" v-model="carMortgageDesc" placeholder="请输入按揭说明" >
        </item>

      </list>
    </div>
    </form>
  </div>
</template>
<script>
import carImgModal from '../add/carImg.vue'
import carEnvironModal from '../add/carEnviron.vue'
import carConfigModal from '../add/carConfig.vue'
import carFuelModal from '../add/carFuel.vue'


import { bus } from 'bus.js'
  export default {
    data(){
      return {
        carImgModal:null,
        carEnvironModal:null,
        carConfigModal:null,
        carFuelModal:null,

        marketId:sess.get('userSession').marketId,
        shopId:sess.get('userSession').shopId || sess.get('shopId'),
        shop:sess.get('userSession').shopId || '',
        userId:sess.get('userSession').userId,
        carId:sess.get('carId'),
        pushNotification:false,

        carEnviron:'国V',
        carFuel:'汽油',
        carConfig:'',
        carFlawDesc:'',
        carMortgageDesc:'',
        carSellingPointDesc:'',
        configNameList:'',
        configList:'',
        carImgList:'',



      }
    },
    mounted(){
      $modal.fromComponent(carImgModal, {
        title: '添加图片',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.carImgModal = modal;
      });

      $modal.fromComponent(carEnvironModal, {
        title: '环保标准',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.carEnvironModal = modal;
      });

      $modal.fromComponent(carConfigModal, {
        title: '车辆配置',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.carConfigModal = modal;
      });

      $modal.fromComponent(carFuelModal, {
        title: '燃料类型',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.carFuelModal = modal;
      });


    },
    created(){
//  	console.log(this)
      bus.$carImgChange = ''
      bus.$on('carFuel', (text) => {
        this.carFuel = text;
        this.carFuelModal.hide();
      });
      bus.$on('carEnviron', (text) => {
        this.carEnviron = text;
        this.carEnvironModal.hide();
      });
      bus.$on('configList', (text) => {
        this.configList = text;
      });
      bus.$on('configNameList', (text) => {
        this.configNameList = text;
      });
      bus.$on('carImgList', (text) => {
        this.carImgList = JSON.stringify(text);

//      console.log(this.carImgList)
      });
      window.axios.get(baseUrl+'/controller/getCarConfById',{params:{carId:this.carId}}).then((res)=>{
					for(let i of res.data.result){
						for(let j of i.childCarConf){
							if(j.selectedState){
								this.configNameList += ` ${j.confName}`
								this.configList += `${j.confId},`
							}
						}
	     		}
					this.configList = this.configList.slice(0,this.configList.length-1)
				})

      
    },
    destroyed() {
      if (this.carImgModal)
        $modal.destroy(this.carImgModal)
      if (this.carEnvironModal)
        $modal.destroy(this.carEnvironModal)
      if (this.carConfigModal)
        $modal.destroy(this.carConfigModal)
      if (this.carFuelModal)
        $modal.destroy(this.carFuelModal)
    },
    methods:{
      showImage() {
        bus.$carImgChange = [];
        this.carImgModal.show();
      },
      showCarEnviron() {
        this.carEnvironModal.show();
      },
      showCarConfig() {
        this.carConfigModal.show();
      },
      showCarFuel() {
        this.carFuelModal.show();
      },

      nextStep(event){
        var formData = new FormData(event.target);
        axios.post(baseUrl+'/controller/car/updateCar', formData).then((res) => {
          if(res){
            setTimeout(()=>{
              $toast.show('发车成功！',2000)
              setTimeout(() => {
                this.$router.forward('/desk')
              },1000)
            },400);
            
            return false
            $dialog.confirm({
              // 标题         
              title: '提示',
              content: '您已成功发车，是否申请入库？',
              // 取消按钮文本
              cancelText: '取消',
              // 确定按钮文本
              okText: '确认'
            }).then((res) => {
              if (res) {
                axios.get(baseUrl + '/controller/car/updateCarState', {params:{carId:this.carId,userId:this.userId,stateKey:'carStockState',stateValue:10}}).then((res) => {
                  if(res) {
                    setTimeout(() => {
                      this.$router.go(-2);
                      $toast.show('申请成功', 2000)
                    }, 400)
                  }
                });
              }else{
                setTimeout(() => {
                  this.$router.go(-2);
                  $toast.show('发车成功！', 2000)
                }, 400)
              }

              
            })
          }
        });
      },
      returnFn(){
      	if(this.$route.query.params){
      		this.$router.go(-2)
      	}else{
      		this.$router.go(-1)
      	}
      }
    }
  }
</script>
<style scoped>
.ic_upload_img{
  width: 25px;
  vertical-align: middle;
}
</style>






























